<template>
    <div class="user-detail">
        <div class="left-detail">
            <el-avatar :size="150"><User /></el-avatar>
            <p style="margin: 10px;">{{ user.username }}</p>
            <p v-if="!state">
                <el-button type="primary" @click="subscrible()">关注</el-button>
            </p>
            <p v-if="state">
                <el-button type="warning" @click="unsubscrible()">取消关注</el-button>
            </p>
        </div>
        <div class="right-detail">
            <p>创建时间:{{ user.createTime }}</p>
            <p>邮箱：{{ user.email }}</p>
            <p>手机号：{{ user.phone }}</p>
        </div>
    </div>
    
    <div> 
        <el-tabs v-model="activeName" 
        @tab-change="changeTab()" :stretch="true">
            <el-tab-pane label="文章" name="articles">
                <el-alert title="该用户是个大傻逼" type="info" center show-icon effect="dark" />
                <div style="margin-top: 10px;">
                    <el-form label-position="top" :label-width="800">
                        <el-row :gutter="30">
                            <el-col :span="24">
                                <el-form-item label="主题：">
                                    <el-radio-group 
                                    @change="loadArticleByUserId()"
                                    v-model="radios" 
                                    text-color="#626aef" 
                                    fill="rgba(125,125,125,0.5)">
                                        <el-radio-button label="javaSe基础" value="100" style="margin: 0 10px;"></el-radio-button>
                                        <el-radio-button label="EE基础" value="200" style="margin: 0 10px;"></el-radio-button>
                                        <el-radio-button label="spring框架" value="300" style="margin: 0 10px;"></el-radio-button>
                                        <el-radio-button label="springBoot应用程序" value="400" style="margin: 0 10px;"></el-radio-button>
                                        <el-radio-button label="前端框架" value="500" style="margin: 0 10px;"></el-radio-button>
                                        <el-radio-button label="其他技术" value="600" style="margin: 0 10px;"></el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="12">
                                <el-form-item label="标题：">
                                    <el-input placeholeder="请输入……" v-model="searchForm.title"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="内容:">
                                    <el-input placeholeder="请输入……" v-model="searchForm.message"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="12">
                                <el-form-item label="创建时间:">
                                    <el-date-picker
                                    type="datetime"
                                    v-model="time"
                                    place-holder="请选择时间"
                                    :editable="false"
                                    :disabled-date="disabledDate"
                                    size="default"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    @change="loadArticleByUserId"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="article_card" v-for="article in userArticle">
                    <el-card style="background-color: rgb(29, 30, 31);">
                        <el-row>
                            <el-link  type="primary" underline="never" @click="router.push('/article/detail?id='+article.id)">
                                <p style="font-size: 1.2em;">标题：{{ article.title }}</p>
                            </el-link>
                        </el-row>
                        <el-row v-if="article.tags.length != 0" style="margin-top: 10px;">
                            <el-text style="color: aqua;">标签：</el-text>
                            <el-tag v-for="tag in article.tags" :key="tag.description" type="primary" effect="plain">
                                <el-link type="success">{{ tag.description }}</el-link>
                            </el-tag>
                        </el-row>
                        <el-row style="margin: 10px 0;">
                            <el-text style="color: aquamarine;">创建时间：{{ article.createTime }}</el-text>
                        </el-row>
                        <el-row>
                            <el-text style="font-size: 1.2em;color: antiquewhite;" :line-clamp="5">内容:{{ article.message }}</el-text>
                        </el-row>   
                    </el-card>
                </div>
                <div>
                        <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        v-model:total="total"
                        layout="prev,pager,next,sizes,total"
                        :page-sizes="[1,2,4,6,8,10]"
                        background
                        :default-current-page="1"
                        @current-change="handlerPageChange"
                        @size-change="handlerSizeChange"
                        >
                        </el-pagination>
                    </div>
            </el-tab-pane>
            <el-tab-pane label="评论" name="comments">
                <el-scrollbar height="60vh"  @end-reached="handlerEnd()">
                        <el-timeline>
                            <el-timeline-item v-for="(comment,index) in comments"
                            :key="index" :timestamp="comment.createTime">
                                <el-text type="primary">{{ comment.message }}</el-text>
                            </el-timeline-item>
                        </el-timeline>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="粉丝" name="fans">
                <div class="users-grid" v-if="fans.length != 0">
                    <div class="user-info"  v-for="fan in fans" >
                        <div class="touxiang">
                            <el-avatar size="large"><User /></el-avatar>
                        </div>
                        <el-link underline="never" @click="router.push('/user/info?id='+fan.id)">
                            <p style="text-align: center;">{{ fan.username }}</p>
                        </el-link>
                    </div>
                 </div>
            </el-tab-pane>
            <el-tab-pane label="关注" name="followings">
                <div class="users-grid" v-if="followings.length != 0">
                    <div class="user-info" v-for="following in followings">
                        <div class="touxiang">
                            <el-avatar size="large"><User /></el-avatar>
                        </div>
                        <el-link underline="never" @click="router.push('/user/info?id='+following.id)">
                            <p style="text-align: center;">{{ following.username }}</p>
                        </el-link>
                    </div>
                 </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import qs from 'qs';
import router from '@/router';

//设置变量存放标签
const activeName = ref('articles');
//定义当前用户
const user = ref({});
const id = new URLSearchParams(window.location.search).get('id');
//定义变量存放该用户发布的帖子
const userArticle = ref([]);

//配置分页功能
const pageSize = ref(4);
//总条目数量
const total = ref(0);
//当前页码
const currentPage = ref(1);

//定义搜索条件
const searchForm = ref({
    title:'',
    message:'',
    themeCode:''
});

//定义变量绑定时间
const time = ref('');

//定义变量绑定单选按钮
const radios = ref('100');

//定义变量存放当前用户关注的用户
const followings = ref([]);

//定义变量保存当前用户的粉丝
const fans = ref([]);

//定义变量保存当前用户的评论
const comments = ref([]);

//获取当前登录用户
const currentUser = JSON.parse(localStorage.getItem('user'));

//定义变量存放当前用户的关注状态;
var state = ref(false);


onMounted(()=>{
    findUser();
    loadArticleByUserId();
    loadCommentSByUserId();
});

function findUser() {
    axios.get(BASE_URL+'/v1/user/query?id='+id)
    .then((response)=>{
        if (response.data.code == 0) {
            user.value = response.data.data[0];
            fans.value = user.value.fans;
            followings.value= user.value.followings;
            console.log('粉丝数',fans.value);
            console.log(followings.value);
            if (fans.value.some((e)=>e==null)) {
                fans.value = [];
            }
            if (followings.value.some((e)=>e==null)) {
                followings.value = [];
            }
            state.value = judgeIsAfans();
        }
        else {
            ElMessage.error('请稍后再试');
        }
    });
}

function loadArticleByUserId() {
    searchForm.value.userId = id; //当前用户id
    searchForm.value.pageSize = pageSize.value;
    searchForm.value.currentPage = currentPage.value;
    searchForm.value.themeCode = radios.value;
    searchForm.value.createTime = time.value;
    let data = qs.stringify(searchForm.value);
    axios.get(BASE_URL+'/v1/article/query?'+data)
    .then((response)=>{
        if(response.data.code == 0) {
            console.log(response.data.data);
            total.value = response.data.data.total;
            userArticle.value = response.data.data.data;
        }
        else {
            ElMessage.error('请稍候再试');
        }
    })
}


function loadCommentSByUserId() {
    axios.get(BASE_URL+'/v1/comment/query?userId='+id)
    .then((response)=>{
        if (response.data.code == 0) {
            comments.value = response.data.data;
        }
        else {
            ElMessage.error('你麻痹！稍后在市');
        }
    });
}

function changeTab(TabPaneName) {
    console.log(activeName.value);
}


function handlerPageChange(number) {
    console.log('当前页码是'+number);
    loadArticleByUserId();

}

function handlerSizeChange(number) {
    console.log('当前页码'+number);
    loadArticleByUserId();
}

function disabledDate(date) {
    return date.getTime() > new Date().getTime();
}

function handlerEnd(direction) {
    console.log('当前方向是:',direction);
    ElMessage.info('到底了，笨蛋');
}

//处理当前用户的管着这
function judgeIsAfans() {
    if (currentUser.id !== id) {
        if (fans.value.some((e)=>e.id == currentUser.id)) {
            return true;
        }
        return false;
    }
    return false;
};

//关注
function subscrible() {
    let userId= currentUser.id;
    axios.post(BASE_URL+'/v1/user/subscrible/'+userId+'/'+id)
    .then((response)=>{
        if (response.data.code == 0) {
            ElMessage.success('关注成功！');
            findUser();
        }
    });
};

//取消关注
function unsubscrible() {
    let userId= currentUser.id;
    axios.post(BASE_URL+'/v1/user/unsubscrible/'+userId+'/'+id)
    .then((response)=>{
        if (response.data.code == 0) {
            ElMessage.success('取消关注成功！');
            findUser();
        }
    });
}


</script>

<style>
.user-detail {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 10%;
    margin-top: 20px;
}

.left-detail {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: aliceblue;
}

.right-detail>p {
    margin: 10px 0;
    color: aliceblue;
}

.article_card {
    margin-bottom: 40px;
}


.el-tag {
    background-color: rgba(0, 0, 0, 0);
}

.users-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.user-info {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
}

.touxiang {
    text-align: center;
}
</style>